import { defineComponent, PropType, onMounted, ref, toRefs, nextTick } from "vue";
import "@/styles/popup.css"
import { ElButton, ElIcon } from "element-plus";
import { Close } from "@element-plus/icons-vue"
import { Config } from "@/utils/gps/createPopup"
export default defineComponent({
    name: "Popup",
    props: {
        config: {
            type: Object as PropType<Config>,
            required: true
        },
        id: {
            type: String as PropType<string | undefined>,
            required: false
        }
    },
    emits: ["close"],
    setup(prop, { emit, slots, expose}){
        const { config: _f } = toRefs(prop)
        const popupRef = ref()
        const popupHeaderRef = ref()
        const maskRef = ref()

        onMounted(()=>{
            setTimeout(()=>{
                popupRef.value.classList.add("popup_visible")
                maskRef.value?.classList.add("mask_visible")
                // 绑定鼠标按下事件，用于在有多个popup时，选中的这个popup始终在最上层
                if(prop.id){
                    popupRef.value.addEventListener("mousedown", ()=>{
                        const _previousContainer = document.querySelector("#popup_maxIndex")
                        if(_previousContainer) _previousContainer.id = ""
                        if(!_f.value.mask){
                            const _container: HTMLDivElement = document.querySelector("#popup_container_" + prop.id)!
                            _container.querySelector(".popup")!.id = "popup_maxIndex"
                        }
                    })
                }
                // 此处是判断是否启用拖拽功能
                if(_f.value.drag && !_f.value.noHeader) {
                    popupRef.value.classList.add("move")
                    popupHeaderRef.value.addEventListener("mousedown", (event)=>{
                        // @ts-ignore
                        document.addEventListener("mousemove", move)
                        // @ts-ignore
                        document.body.style.cssText = "user-select: none;"
                        // @ts-ignore
                        // 可视区域宽度
                        const pageHeight = document.documentElement.clientHeight;
                        // 鼠标距离点击元素左/上侧距离
                        const elX = event.offsetX
                        const elY = event.offsetY
                        popupHeaderRef.value.addEventListener("mouseup", ()=>{
                            // @ts-ignore
                            document.removeEventListener("mousemove", move)
                            // @ts-ignore
                            document.body.style.cssText = ""
                        })

                        function move(event){
                            popupRef.value.style.cssText = `width: ${_f.value.width}px; left: 0; top: 0; height: ${_f.value.height}px;
                              transform: translate(${event.clientX - elX}px, ${(event.clientY - elY)}px);`
                        }
                    })
                }

            }, 10)
        })

        /**
         * 关闭窗口
         */
        function closeWindow(){
            console.log("关闭");
            popupRef.value.classList.remove("popup_visible")
            maskRef.value?.classList.remove("mask_visible")
            setTimeout(()=>{
                emit("close")
            },300)
        }

        expose({
            closeWindow
        })

        return ()=> <div class="cdl_popup">
            <div ref={popupRef} class={`popup ${_f.value.mask? "" : "independence"}`}
                 style={`width: ${_f.value.width === "auto" ? "auto" : _f.value.width + "px"}; 
                        height: ${_f.value.height === "auto" ? "auto" : _f.value.height + "px"}; 
                        ${_f.value.rootElStyle}`}>
                <div class="popup_inner">
                    {
                        _f.value.noHeader? null :
                        <div ref={popupHeaderRef} class={!slots.header ? "popup_header" : "popup_header_custom"}>
                            {
                                slots.header ? slots.header(closeWindow) : <>
                                    <span>{_f.value.title}</span>
                                    <div class="popup_close" onClick={closeWindow}>
                                        <ElIcon size="20"><Close/></ElIcon>
                                    </div>
                                </>
                            }
                        </div>
                    }
                    <div class="popup_body" style={_f.value.height ? "overflow-y: auto;" : "" +
                    _f.value.width ? "overflow-x: auto;" : ""}>
                        {slots.default ? slots.default(closeWindow) : "未接收到插槽内容"}
                    </div>
                </div>

            </div>
            {
                _f.value.mask ? <div ref={maskRef} class="mask"></div> : null
            }
        </div>
    }
})
